<template>
  <commonTable
    ref="commonTableRef"
    rowKey="bookId"
    :query="{ isActive: 0 }"
    :columns="roomTypeTableState.columns"
    :rules="[]"
    name="book"
    :addon="true"
    :hideEdit="true"
    :create="false"
  >
    <template #addon="{ record }">
      <a-button type="link" @click="handleClick(record)">查看</a-button>
      <a-button
        type="link"
        v-if="record.isActive === 0"
        @click="handleGetIn(record)"
        >入住
      </a-button>
    </template>
  </commonTable>
  <a-modal
    width="700px"
    title="入住登记"
    v-model:visible="modalGetInVisible"
    @ok="handleGetInOk"
  >
    <div style="margin-bottom: 20px">
      <a-button @click="handleAdd">新增</a-button>
      <a-button @click="handleDelete">删除</a-button>
    </div>
    <a-form ref="getInFormRef" :model="getInFormState">
      <a-row v-for="(item, index) in getInFormState.list" :key="index">
        <a-form-item
          :rules="[{ required: true, message: '必填' }]"
          label="姓名"
          :name="['list', index, 'name']"
        >
          <a-input v-model:value="item.name"></a-input>
        </a-form-item>
        <a-form-item
          :rules="[{ required: true, message: '必填' }]"
          label="身份证号"
          :name="['list', index, 'idCard']"
        >
          <a-input v-model:value="item.idCard"></a-input>
        </a-form-item>
      </a-row>
    </a-form>
  </a-modal>
  <a-modal :title="modalState.title" v-model:visible="modalState.visible">
    <commonTable
      :query="roomBookTableState.query"
      rowKey="roomBookId"
      name="roomBook"
      :hideEdit="true"
      :hideDelete="true"
      :create="false"
      :columns="roomBookTableState.columns"
    ></commonTable>
  </a-modal>
</template>

<script setup>
import {
  getCurrentInstance,
  nextTick,
  onMounted,
  reactive,
  ref,
  watch,
} from "vue";
import commonTable from "../../utils/CommonTable";
import { useStore } from "vuex";
import { checkInRecord } from "@/api";
const store = useStore();
const getInFormRef = ref();
const commonTableRef = ref();
const modalState = reactive({
  visible: false,
  title: "详细入住日期",
});
const handleClick = (record) => {
  roomBookTableState.query = { bookId: record.bookId };
  modalState.visible = true;
};
const roomBookTableState = reactive({
  columns: [
    {
      title: "序号",
      dataIndex: "roomBookId",
    },
    {
      title: "预定日期",
      dataIndex: "roomBookDate",
    },
  ],
  query: {},
});

const roomTypeTableState = reactive({
  dataSource: [],
  columns: [
    {
      title: "序号",
      dataIndex: "bookId",
    },
    {
      title: "预订用户",
      dataIndex: "userId",
    },
    {
      title: "房间号",
      dataIndex: "roomPackage.room.roomNo",
    },
    {
      title: "房间类型",
      dataIndex: "roomPackage.room.roomType.roomTypeName",
    },
    {
      title: "楼层",
      dataIndex: "roomPackage.room.floor.floorName",
    },
    {
      title: "含早",
      dataIndex: "roomPackage.isBreakfast",
      slots: { customRender: "boolean" },
    },
    {
      title: "已入住",
      dataIndex: "isActive",
      slots: { customRender: "boolean" },
    },
    {
      title: "操作",
      slots: { customRender: "action" },
    },
  ],
});
const getInFormState = reactive({
  list: [
    {
      name: "",
      idCard: "",
    },
  ],
});
const handleAdd = () => getInFormState.list.push({ name: "", idCard: "" });
const handleDelete = () =>
  getInFormState.list.length > 0 &&
  getInFormState.list.splice(getInFormState.list.length - 1, 1);
const modalGetInVisible = ref(false);
const thisRecord = ref();
const handleGetIn = async (record) => {
  thisRecord.value = record;
  modalGetInVisible.value = true;
  await nextTick();
  getInFormRef.value.resetFields();
  getInFormState.list = [{ name: "", idCard: "" }];
};
const handleGetInOk = async () => {
  await getInFormRef.value.validate();
  const payload = {
    bookId: thisRecord.value.bookId,
    userId: store.state.user.username || "123",
    isPay: 0,
    checkInInfo: getInFormState.list,
  };
  await checkInRecord.update(payload);
  modalGetInVisible.value = false;
  commonTableRef.value.getList();
};
</script>

<style scoped></style>
